import Taro from '@tarojs/taro'
import {View, Text, RichText} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import {AtTag, AtButton} from 'taro-ui'
import withShare from "../../components/share/withShare";

import './index.less'

@connect(state => ({
  service: state.service,
}))
@withShare()
export default class Index extends Taro.Component {

  config = {
    navigationBarTitleText: '详情',
  }

  constructor() {
    super(...arguments)

    const {id = 0} = this.$router.params
  }

  componentDidMount() {
    const {id = 0} = this.$router.params
    this.props.dispatch({
      type: 'service/get',
      payload: id,
    });
  }

  call = () => {
    Taro.makePhoneCall({
      phoneNumber: '18352513572',
      success: function (res) {
        console.log("接口调用成功返回的回调")
      },
      fail: function (res) {
        console.log("接口调用失败返回的回调")
      },
      complete: function (res) {
        console.log("接口调用结束的回调函数（调用成功、失败都会执行）")
      }
    })
  }

  toHome = () => {
    Taro.switchTab({url: '/pages/home/index'});
  }

  render() {
    const {service: {item}} = this.props
    const tagArray = item.tags ? item.tags.split(',') : []
    const content = item.content && item.content.replace(/width:\s*auto/gi, 'max-width:100%')

    return (
      <View className='container'>
        <View className='img-wrapper'>
          <Image mode='widthFix' className='img' src={item.img}/>
        </View>
        <View className='title-wrapper'>
          <Text className='title'>{item.name}</Text>
          <View className='meta'>
            <View className='tags-wrapper'>
              {
                tagArray.length && tagArray.map(val => <AtTag key={val} size='small' customStyle={{marginRight: '4Px', color: '#0cf'}}>{val}</AtTag>)
              }
            </View>
          </View>
        </View>
        <View className='panel'>
          <View className='body with-padding'>
            <RichText nodes={content}/>
          </View>
        </View>
        <View className='foot'>
          <View className='icon-wrapper'>
            <AtButton openType='share' size='small' customStyle={{color: '#fff', background: '#8A9DEA', border: 'none'}}>
              <Text className="iconfont icon-fenxiang1"/>
            </AtButton>
            <Text className="iconfont icon-dianhua" onClick={this.call}/>
            <Text className="iconfont icon-home_fill_light" onClick={this.toHome}/>
          </View>
        </View>
      </View>
    )
  }
}